<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Message 消息提示</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">从顶部出现，3 秒后自动消失。</p>
	<p class="desc">Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释。 文末有 options 列表，可以结合 Notification 的文档理解它们。 Element Plus 注册了一个全局的 $message方法用于调用。 Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。</p>
	<el-button :plain="true" @click="open">Show message</el-button>
	<el-button :plain="true" @click="openVn">VNode</el-button>
	
	<el-divider content-position="left">不同状态</el-divider><!-- =============================================================== -->
	<p class="desc">用来显示「成功、警告、消息、错误」类的操作反馈。</p>
	<p class="desc">当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。 此时正文内容以 message 的值传入。 同时，我们也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open4 那样直接调用。</p>
	<el-button @click="open1">success</el-button>
	<el-button @click="open2">warning</el-button>
	<el-button @click="open3">message</el-button>
	<el-button @click="open4">error</el-button>
	
	<el-divider content-position="left">可关闭的消息提示</el-divider><!-- =============================================================== -->
	<p class="desc">可以添加关闭按钮。</p>
	<p class="desc">默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true 此外，和 Notification 一样，Message 拥有可控的 duration， 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为0便表示该消息不会被自动关闭。</p>
	<el-button @click="open_c1">success</el-button>
	<el-button @click="open_c2">warning</el-button>
	<el-button @click="open_c3">message</el-button>
	<el-button @click="open_c4">error</el-button>
	
	<el-divider content-position="left">文字居中</el-divider><!-- =============================================================== -->
	<p class="desc">使用 center 属性让文字水平居中。</p>
	<el-button plain @click="openCenter">Centered text</el-button>
	
	<el-divider content-position="left">使用 HTML 片段作为正文内容</el-divider><!-- =============================================================== -->
	<p class="desc">message 还支持使用 HTML 字符串作为正文内容。</p>
	<p class="desc">将dangerouslyUseHTMLString属性设置为 true,message 就会被当作 HTML 片段处理。</p>
	<el-button @click="openHTML">Use HTML String</el-button>
	
	<el-divider content-position="left">分组消息合并</el-divider><!-- =============================================================== -->
	<p class="desc">合并相同内容的消息。</p>
	<p class="desc">设置 grouping 为 true，内容相同的 message 将被合并。</p>
	<el-button @click="openGroup">message Group</el-button>
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		open(){
			//可选四种：'success' | 'warning' | 'info' | 'error'
			this.$message.success('show success');
			// this.$message({message: "show success2", type: 'success'});
			// ElementPlus.ElMessage('this is a message.')
		},
		openVn(){
			ElementPlus.ElMessage({
				message: Vue.h('p', null, [
					Vue.h('span', null, 'Message can be '),
					Vue.h('i', { style: 'color: red' }, 'VNode'),
				]),
				// type: 'success',
			})
		},
		
		open1(){
			this.$message.success("成功消息。");
		},
		open2(){
			this.$message.warning("警告消息。");
		},
		open3(){
			this.$message.info("普通消息。");
		},
		open4(){
			this.$message.error("错误消息。");
		},
		
		open_c1(){
			this.$message({
				showClose: true,
				type: "success",
				message: "成功消息（可关闭）。",
			});
		},
		open_c2(){
			this.$message({
				showClose: true,
				type: "warning",
				message: "警告消息（可关闭）。",
			});
		},
		open_c3(){
			this.$message({
				showClose: true,
				type: "info",
				message: "普通消息（可关闭）。",
			});
		},
		open_c4(){
			this.$message({
				showClose: true,
				type: "error",
				message: "错误消息（可关闭）。",
			});
		},
		
		openCenter(){
			ElementPlus.ElMessage({
				showClose: true,
				type: "success",
				message: '文字居中的消息',
				center: true,
			});
		},
		
		openHTML(){
			this.$message({
				// type: "success",
				dangerouslyUseHTMLString: true,
				message: '<strong>This is <i>HTML</i> string</strong>',
			})
		},
		
		openGroup(){
			this.$message({
				type: "success",
				grouping: true,
				message: '多来几个消息试试。。。',
			})
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>